<template>
  <div class="employee">
    <!-- 卡1 -->
    <el-card class="top-card">
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <div class="info-box">
            <!-- 图标 -->
            <i class="el-icon-info" />
            <span>共{{ total }}条数据</span>
          </div>
        </el-col>
        <el-col :span="6" class="btn-box">
          <el-button
            type="warning"
            @click="$router.push('/import')"
          >导入</el-button>
          <el-button type="danger" @click="exportExcel">导出</el-button>
          <el-button
            type="primary"
            @click="$refs.Dialog.dialogFormVisible = true"
          >新增员工</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 卡2 -->
    <el-card class="bottom-card">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="username" label="姓名" width="200" />
        <el-table-column prop="mobile" label="手机号" width="200" />
        <el-table-column prop="workNumber" label="工号" width="200" />
        <!-- <el-table-column prop="formOfEmployment" label="聘用形式" width="200" /> -->
        <el-table-column :formatter="formatter" label="聘用形式" width="200" />
        <el-table-column prop="departmentName" label="部门" width="200" />
        <el-table-column prop="correctionTime" label="转正时间" width="200">
          <template #default="{ row }">
            <span>{{ row.correctionTime | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="timeOfEntry" label="入职时间" width="200">
          <template #default="{ row }">
            <span>{{ row.timeOfEntry | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="状态" width="150" />
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              @click="handleClick(row)"
            >查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="delteEmp(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page.sync="page"
        :page-size="size"
        layout="prev, pager, next"
        :total="total"
      />
    </el-card>
    <empDialog ref="Dialog" @getEmployees="getEmployees" />
  </div>
</template>

<script>
import { getEmployeesList, deleteEmployees } from '@/api/employees'
import EMPLOCONSTANT from '@/constant/employees'
export default {
  name: 'Employees',
  components: {
    empDialog: () => import('./component/empDialog.vue')
  },
  data() {
    return {
      tableData: [], // 表格数组
      page: 1, // 当前页数
      size: 3, // 页容量
      total: 0 // 总条数
    }
  },
  watch: {
    // 监听page的变化,请求数据
    page() {
      this.getEmployees()
    }
  },
  created() {
    this.getEmployees()
  },
  methods: {
    // 导出
    async exportExcel() {
      const { data: res } = await getEmployeesList({
        page: 1,
        size: 10000
      })
      const header = Object.keys(EMPLOCONSTANT.empInfoCh) // 获取中文表头
      const data = res.rows.map((v) => {
        const _arr = []
        header.forEach((chkey) => {
          const key = EMPLOCONSTANT.empInfoCh[chkey]
          const value = v[key] // timeOfEntry
          _arr.push(value)
        })
        return _arr
      })
      import('@/vendor/Export2Excel').then((excel) => {
        excel.export_json_to_excel({
          header, // 表头 必填 数组
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // 获取员工数据列表
    async getEmployees() {
      const { data: res } = await getEmployeesList({
        page: this.page,
        size: this.size
      })
      this.tableData = res.rows
      this.total = res.total
    },
    // 聘用形式的枚举
    formatter(row) {
      const arr = EMPLOCONSTANT.hireType.filter(
        (v) => v.id == row.formOfEmployment
      )
      return arr[0] ? arr[0].value : '非正式'
    },
    // 查看按钮
    handleClick(row) {
      // console.log('row', row)
      this.$router.push({
        name: 'detail',
        params: {
          id: row.id
        }
      })
    },
    // 删除按钮
    async delteEmp(row) {
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await deleteEmployees(row.id)
          this.$message({
            type: 'success',
            message: res.message
          })
          // 如果是最后一个数据,最后一页.则返回上一页
          if (this.tableData.length == 1) {
            this.page > 1 ? --this.page : this.page
          }
          // 重新获取数据
          this.getEmployees()
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss">
.employee {
  .bottom-card {
    margin-top: 20px;
  }
  .el-pagination {
    text-align: center;
    margin-top: 20px;
  }
  .el-row {
    align-items: center;
  }
  .info-box {
    border: 1px solid #96d7ff;
    background-color: #e6f7ff;
    border-radius: 4px;
    display: inline-block;
    padding: 4px;
    i {
      color: #5181fb;
    }
  }
  .btn-box {
    min-width: 280px;
  }
}
</style>
